<template>
    <rx-dialog @handOk="onOk" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="$ti18('rxForm.name','名称')" prop="fieldLabel">
                                <span>{{fieldSetting.fieldLabel }}</span>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.newName','新名称')" prop="newName">
                                <a-input v-model="mdl.newName" :placeholder="i18n('form.newName','新名称')"></a-input>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.textSize','文字大小')" prop="fontSize">
                                <a-input type="number" v-model="mdl.fontSize" :placeholder="i18n('form.textSize','文字大小')"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.textColor','文字颜色')" prop="fontColor">
                                <a-input class="labeinput_list" style="width: 35%"
                                         v-model="mdl.fontColor" type="color" :placeholder="i18n('form.textColor','文字颜色')"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.Prefix','前缀')" prop="prefix">
                                <a-input v-model="mdl.prefix" :placeholder="i18n('form.Prefix','前缀')"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.suffix','后缀')" prop="suffix">
                                <a-input v-model="mdl.suffix" :placeholder="i18n('form.suffix','后缀')"></a-input>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>

import { Util, Dialog, RxLayout, BaseForm} from "@lowcode/jpaas-common-lib";
export default {
    name: "MeasureSetting",
    props: {
        fieldSetting:{
            type:Object
        },
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        },
    },
    mixins: [BaseForm],
    components: {
        RxLayout
    },
    data() {
        return {
            mdl:{
                newName:"",
                fontSize:24,
                fontColor:'#000000',
                prefix:'',
                suffix:'',
            }
        }
    },
    created() {
        if(this.fieldSetting.styleSetting){
            this.mdl=Object.assign(this.mdl,this.fieldSetting.styleSetting);
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartDef", key);
        },
        onOk(){
            Util.closeWindow(this, "ok",this.mdl);
        },
        cancel(){
            Util.closeWindow(this, "cancel");
        }
    },
    watch: {

    }
}
</script>

<style scoped>

</style>